<% if !flash.empty? %>
  <div id="flash" data-flash-target="flash" data-controller="flash" data-testid="FlashMessages">
    <% flash.each do |name, msg| -%>
      <%
        color = case name.to_s
        when "alert"
          'orange'
        when 'error'
          'red'
        when 'notice'
          'blue'
        when 'success'
          'green'
        else
          name.to_s
        end
      %>
      <%= content_tag :div, class: "bg-#{color}-100 border border-#{color}-400 text-#{color}-700 px-4 py-3 relative" do %>
        <% if msg.kind_of? Array %>
          <ul>
            <% msg.each do |m| %>
              <li><%= m %></li>
            <% end %>
          </ul>
        <% else %>
          <span><%= msg %></span>
        <% end %>
        <span data-action="click->flash#hide" class="absolute top-0 bottom-0 right-0 px-4 py-3">
          <svg class="fill-current h-6 w-6 text-<%= color %>-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </span>
      <% end %>
    <% end -%>
  </div>
<% end %>
